<template>
  <div class="tdo-total">
    <div class="total" :style="{ backgroundColor: color }">
      <div class="title">{{ title }}</div>
      <div class="status">{{ status }}</div>
      <span>{{ total }}</span>
    </div>
    <echart class="chart-c" :options="options" :loading="loading" />
  </div>
</template>
<script setup>
import { ref, defineProps, computed, watch } from 'vue'
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  total: {
    type: [String, Number],
    default: '--',
  },
  status: {
    type: String,
    default: '',
  },
  color: {
    type: String,
    default: '',
  },
  dataset: {
    type: Object,
    require: true,
    default: () => ({}),
  },
  loading: {
    type: Boolean,
    default: false,
  },
})
watch(
  () => props.dataset,
  (val) => {
    options.value.dataset = val
  }
)
const options = ref({
  grid: {
    top: 10,
    right: 20,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter: (o) => {
      const { name, value } = o[0]
      return `${name}：${value.labelNum}`
    },
  },
  //   legend: {},
  xAxis: [
    {
      type: 'value',
    },
  ],
  yAxis: [
    {
      type: 'category',
      boundaryGap: true,
      axisTick: {
        show: false,
      },
      axisLabel: {
        // inside: true,
        interval: 0,
        // offset: 20,
        // verticalAlign: 'top',
        margin: 5,
        padding: [0, 0, 20, 0],
      },
    },
  ],
  label: {
    show: true,
    position: 'right',
    offset: [-5, 0],
  },
  series: [
    {
      type: 'bar',
      barMaxWidth: 20,
      itemStyle: {
        color: props.color,
      },
      // barCategoryGap: 18,
    },
  ],
})
</script>
<style lang="less" scoped></style>
